<template>
  <div class="mine">
    <div style="box-sizing: border-box; padding: 0.4rem; height: 2.13rem; display: flex;">
      <img :src="'./img/logo.png'" style="width: 1.33rem; height: 1.33rem;"/>
      <div class="flex-col" style="margin-left: 0.4rem;">
        <div style="font-size: 0.48rem; font-weight: bold;">Hi,{{ $store.state.userInfo.nick || $store.state.userInfo.phone }}</div>
        <div style="font-size: 14px; color: #7f7f7f;">编号:{{ $store.state.userInfo.userId }}</div>
      </div>
    </div>

    <div class="data-blank">
      <div class="flex-row">
        <div class="flex-col" style="width: 50%;">
          <span>总流水(元)</span>
          <span style="font-size: 20px;">{{ allData.totalRevenue || 0  }}</span>
        </div>
        <div class="flex-col" style="width: 50%;">
          <span>总收益(元)</span>
          <span style="font-size: 20px;">{{ allData.totalRevenue || 0 }}</span>
        </div>
      </div>
      <div class="flex-row">
        <div class="flex-col">
          <span>已提现金额(元)</span>
          <span>{{ allData.haveWithdrawalAmount || 0 }}</span>
        </div>
        <div class="flex-col">
          <span>待审核金额(元)</span>
          <span>{{ allData.amountToBeAudited || 0 }}</span>
        </div>
        <div class="flex-col">
          <span>可提现金额(元)</span>
          <span>{{ allData.cashWithdrawalAmount || 0 }}</span>
        </div>
      </div>
    </div>

    <div class="peo-blank" v-if="!$store.getters.ifShoper && !$store.getters.ifIntroducer">
      <div class="peo-item" @click="$router.push('Shoper')">
        <span>商户</span>
        <span>{{ shopAdminSum }}</span>
        <img :src="'./img/right.png'"/>
      </div>
      <div class="peo-item" @click="$router.push('Sales')" v-if="$store.getters.ifAdmin || $store.getters.ifAgent">
        <span>业务员</span>
        <span>{{ salesmanSum }}</span>
        <img :src="'./img/right.png'"/>
      </div>
    </div>

    <div style="height: 0.27rem; background: #f8f9fd; margin-top: 0.27rem;"></div>

    <div>
      <div style="height: 1.2rem;">
        <div class="mine-item-header" style="margin-left: 0.4rem;">服务与工具</div>
      </div>
      <van-grid :column-num="4" :border="false">
        <van-grid-item v-for="item in func" :key="item.key">
          <div style="text-align: center; font-size: 12px; color: #666;" @click="clickFunc(item.key)">
            <img :src="`./img/${ item.key }.png`" style="width: 0.75rem; height: 0.75rem;"/>
            <div style="margin-top: 0.2rem;">{{ item.name }}</div>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- <sele-person></sele-person> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      func: [],

      allData: {},

      salesmanSum: 0,
      shopAdminSum: 0

    };
  },
  methods: {
    clickFunc(key) {
      if (key == 'Exit') {
        this.$store.commit('exit');
      } else if (key == 'ReCover') {
        this.Huishow();
      } else {
        this.$router.push(key);
      }
    },
    Huishow() {
      this.$tool.scanEquipmentOrSn().then(res => {
        this.$axios.delete('/api/bjk/retrieve', { 
          sn: res.code, type: res.type
        }).then(() => {
          this.$toast('设备回收成功');
          this.Huishow();
        });
      });
    },
    getData() {
      this.$axios.get('/api/orderFormController/getUserByMoneyManage', {
        userId: this.$store.state.userInfo.userId
      }).then(res => {
        this.allData = res;
      });

      this.$axios.get('/api/chargerPlaEquipmentController/getAllEquipmentStatus', { 
        userId: this.$store.state.userInfo.userId
      }).then(res => {
        let allLevelUserCaseModel = res.allLevelUserCaseModel;
        this.salesmanSum = allLevelUserCaseModel.salesmanSum;
        this.shopAdminSum = allLevelUserCaseModel.shopAdminSum;
      });
    },
    getFuncList() {
      if (this.$store.getters.ifAdmin) {
        this.func = [
          { name: '提现审批', key: 'CashApprove' },
          { name: '添加门店', key: 'AddShop' },
          { name: '添加角色', key: 'AddRole' },

          { name: '特殊用户', key: 'SupUser' },
          { name: '添加特殊用户', key: 'AddSuper' },
          { name: '代理', key: 'Agent' },
          { name: '服务商', key: 'Channel' },

          { name: '出入库', key: 'Dstore' },
          { name: '业务员备件库', key: 'SaleStore' },
          { name: '设备回收', key: 'ReCover' },

          { name: '认证信息', key: 'AuthPage' },
          { name: '修改密码', key: 'SetPass' },
          { name: '退出登录', key: 'Exit' },
        ];
      } else if (this.$store.getters.ifAgent) {
        this.func = [
          { name: '申请提现', key: 'CashOut' },
          { name: '提现记录', key: 'CashLog' },
          { name: '添加门店', key: 'AddShop' },
          { name: '添加角色', key: 'AddRole' },

          { name: '特殊用户', key: 'SupUser' },
          { name: '添加特殊用户', key: 'AddSuper' },
          { name: '代理', key: 'Agent' },
          { name: '服务商', key: 'Channel' },

          { name: '出入库', key: 'Dstore' },
          { name: '业务员备件库', key: 'SaleStore' },
          { name: '业务员业绩', key: 'SaleScore' },
          { name: '设备回收', key: 'ReCover' },

          { name: '认证信息', key: 'AuthPage' },
          { name: '修改密码', key: 'SetPass' },
          { name: '退出登录', key: 'Exit' },
        ];
      } else if (this.$store.getters.ifSales) {
        this.func = [
          { name: '添加门店', key: 'AddShop' },
          { name: '添加角色', key: 'AddRole' },
          { name: '特殊用户', key: 'SupUser' },
          { name: '添加特殊用户', key: 'AddSuper' },
          { name: '认证信息', key: 'AuthPage' },
          { name: '修改密码', key: 'SetPass' },
          { name: '退出登录', key: 'Exit' },
        ];
      } else {
        this.func = [
          { name: '申请提现', key: 'CashOut' },
          { name: '提现记录', key: 'CashLog' },
          { name: '认证信息', key: 'AuthPage' },
          { name: '修改密码', key: 'SetPass' },
          { name: '退出登录', key: 'Exit' },
        ];
      }
    }
  },
  mounted() { 
    this.getData();
    this.getFuncList();
  }
};
</script>

<style lang="less">
.mine {
  background: #fff;
  .peo-blank {
    margin-top: 0.27rem; 
    box-sizing: border-box; 
    width: 100%; 
    padding: 0 0.4rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .peo-item {
      width: 4.4rem;
      height: 1.6rem;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      font-size: 16px;
      color: #000;
      span {
        margin-left: 0.36rem;
        &:nth-child(2) {
          font-weight: bold;
        }
      }
      img {
        width: 15px;
        height: 15px;
        margin-left: 0.2rem;
      }
      &:first-child {
        background: url(/img/s.png) center center / 100% 100%;
      }
      &:last-child {
        background: url(/img/y.png) center center / 100% 100%;
      }
    }
  }
  .data-blank {
    width: 9.2rem; 
    height: 4.03rem; 
    background-image: linear-gradient(-90deg, #1469fe 0%, #2775fd 100%); 
    border-radius: 0.13rem; 
    box-sizing: border-box; 
    padding: 0.4rem; 
    margin: 0 auto; 
    display: flex;
    flex-direction: column; 
    justify-content: space-between;
    span:first-child {
      font-size: 12px;
      color: #c0d9fb;
    }
    span:last-child {
      font-size: 14px;
      font-weight: bold;
      color: #ffffff;
      margin-top: 0.15rem;
    }
  }
  .mine-item-header {
    height: 1.2rem;
    display: flex;
    align-items: center;
    flex-direction: row;
    font-size: 0.43rem;
    color: #333;
    font-weight: bold;
    &::before {
      content: '';
      width: 0.05rem;
      height: 0.35rem;
      background-color: #3563f5;
      border-radius: 0.03rem;
      margin-right: 0.15rem;
    }
  }
}
</style>
